<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 110px; height: 200px; padding: 50px;background-color: burlywood;border: 1px solid black;margin: 0 auto;}
        #div1 span{font-size: 22px;}
        #div1 button{width: 100px;height: 30px;font-size: 16px;margin-top: 20px;background:black;color: #fff;}
    </style>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        var i = 0;//总毫秒数
        var timer = null;
        var isRunning = false;//表示此时定时器是否进行
        window.onload = function(){
            function startFunc(){
                timer = setInterval(function(){
                    i++;
                    $('sec').innerHTML = doubleNum(i%60);
                    $('min').innerHTML = doubleNum(parseInt(i/60)%60);
                    $('hour').innerHTML = doubleNum(parseInt(i/3600));
                },1000)
            }
            function pauseFunc(){
                clearInterval(timer);
            }
            $('start').onclick = function(){
                if(!isRunning){
                    $('start').innerHTML = '暂停';
                    isRunning = true;
                    startFunc();
                }else{
                    $('start').innerHTML = '开始';
                    isRunning = false;
                    pauseFunc();
                }
            }
            $('reset').onclick = function(){
                clearInterval(timer);
                i = 0;
                isRunning = false;
                $('start').innerHTML = '开始';
                $('sec').innerHTML = "00";
                $('min').innerHTML = "00";
                $('hour').innerHTML = "00";
            }
        }
        function doubleNum(n){
            if(n<10){
                return "0" + n;
            }else{
                return n;
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <span id = "hour">00</span>
        <span>:</span>
        <span id = "min">00</span>
        <span>:</span>
        <span id = "sec">00</span>
        <br>
        <button id = "start">开始</button>
        <!-- <button id = "pause">暂停</button> -->
        <button id = "reset">复位</button>
    </div>
</body>
</html>